<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>添加图片</title>
    <link href="/Public/Admincenter/themes/default/style.css" rel="stylesheet" type="text/css" media="screen"/>
    <link href="/Public/Admincenter/themes/css/core.css" rel="stylesheet" type="text/css" media="screen"/>
    <!--[if IE]>
    <link href="/Public/Admincenter/themes/css/ieHack.css" rel="stylesheet" type="text/css" media="screen"/>
    <![endif]-->

    <script src="/Public/Admincenter/jquery/jquery.js" type="text/javascript"></script>
    <style type="text/css">
        {literal}
        #formBar{
            position: fixed;
            bottom:0px;
            width:99%;
            left:0px;
        }

        * html #formBar{
            position: absolute;
            bottom:0px;
            width:100%;
            left:0px;
        }
        body{
            background:#FFFFFF;
        }
        {/literal}
    </style>

</head>


<body>
<div id="navTab" class="tabsPage"><iframe id="thumbs" name="thumbs" src="" style="display:none;"></iframe>
    <div style="display: block;" class="page unitBox" style="border:none;">
        <form enctype="multipart/form-data" target="thumbs" action="/{$smarty.const.MODULE_ALIAS}/{$smarty.const.CONTROLLER_NAME}/imageAdd" method="post"
              onSubmit="return checkForm();">

            <div class="pageFormContent">
                <dl class="nowrap">
                    <dt>图片标题：</dt>
                    <dd style="width:300px;text-align:left;" class="nowrap">
                        <input id="title" maxlength='100' type="text" name="title" value=''>
                    </dd>
                </dl>
                <div class="divider"></div>

                <dl class="nowrap">
                    <dt>图片位置：</dt>
                    <dd style="width:300px;text-align:left;" class="nowrap">
                        <select id="position" name="position">
                            {foreach name=position item=value key=key from=$position}
                            <option value="{$key}">
                                {$value}
                            </option>
                            {/foreach}
                        </select>
                    </dd>
                </dl>
                <div class="divider"></div>

                <dl class="nowrap">
                    <dt>上传小图：</dt>
                    <dd style="width:300px;" class="nowrap">
                        <input type="file" value="" class="textInput" name="path" id="path2" onchange="fileChange(this,'small')"/>(170x122)
                    </dd>
                </dl>
                <dl class="nowrap">
                    <dt>预览小图：</dt>
                    <dd style="width:300px;text-align:left;" class="nowrap">
                        <a href="#" target='_blank' title='查看原图'><img src="" id="thumbNail" width="100" height="100"></a>
                    </dd>
                </dl>
                <div class="divider"></div>
                <dl class="nowrap">
                    <dt>上传大图：</dt>
                    <dd style="width:300px;" class="nowrap">
                        <input type="file" value="" class="textInput" name="path2" id="path2" onchange="fileChange(this,'big')"/>(640x784)
                    </dd>
                </dl>
                <dl class="nowrap">
                    <dt>预览大图：</dt>
                    <dd style="width:300px;text-align:left;" class="nowrap">
                        <a href="#" target='_blank' title='查看原图'><img src="" id="thumbNail2" width="100" height="100"></a>
                    </dd>
                </dl>
                <div class="divider"></div>


                <dl class="nowrap">
                    <dt>图片外链：</dt>
                    <dd style="width:300px;text-align:left;" class="nowrap">
                        <input id="title" maxlength='200' type="text" id="link" name="link" value=''>
                    </dd>
                </dl>
                <div class="divider"></div>

                <dl class="nowrap">
                    <dt>图片描述：</dt>
                    <dd style="width:300px;text-align:left;" class="nowrap"><textarea  name="descr" id="descr" style="height:50px;width:240px;"></textarea></dd>
                </dl>
                <div class="divider"></div>
            </div>

            <div class="formBar" id="formBar">
                <ul>
                    <li><div class="buttonActive"><div class="buttonContent"><button type="submit">保存</button></div></div></li>
                    <li><div class="button"><div class="buttonContent">
                                <button type="button" class="close" onClick="window.close();">关 闭</button>
                            </div></div></li>
                </ul>
            </div>
        </form>
    </div>

</div>
<script type="text/javascript">
    {literal}
    function checkForm(){
        var path=$("#path").val();
        if(path==""){
            alert("请上传图片");
            return false;
        }
    }
    function formCall(v){
        if(v=="success"){
            alert("添加成功");
            return false;
        }

    }

    function fileChange(e,flag){
        var f = e.files[0];//一次只上传1个文件，其实可以上传多个的
        var FR = new FileReader();
        FR.onload = function(f){//回调函数
            compressImg(this.result,flag);
        };
        //该方法将文件读取为一段以 data: 开头的字符串，这段字符串的实质就是 Data URL，
        //Data URL是一种将小文件直接嵌入文档的方案。这里的小文件通常是指图像与 html 等格式的文件。
        FR.readAsDataURL(f);
    }

    function compressImg(imgData,flag){

        if(!imgData)return;
        var canvas = document.createElement('canvas');
        var img = new Image();
        img.src = imgData;
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height); // canvas清屏
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0, img.width, img.height); // 将图像绘制到canvas上
        //toDataURL能够将canvas转换为图像，图像是基于Base64编码的
        var datas=canvas.toDataURL("image/jpeg");
        if(flag=='small') {
            $("#thumbNail").attr("src",datas);
            $("#thumbNail").parent().attr("href",datas);
        }else {
            $("#thumbNail2").attr("src",datas);
            $("#thumbNail2").parent().attr("href",datas);
        }
    }

    {/literal}
</script>

</body>
</html>
